<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>你好, 雨涵</title>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="sara mazal lessons">
<meta name="keywords" content="HTML, CSS, JavaScript, mazal, icons">
<meta name="author" content="Sara Mazal">
<!--  SGVsbG8hIE15IG5hbWUgaXMgU2FyYSBNYXphbC4gV2VsY29tZSB0byBteSBDb2RlUGVuIQ== -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;300;400;500&family=Raleway:wght@100;200;300;400;500&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<!-- SGVsbG8hIE15IG5hbWUgaXMgU2FyYSBNYXphbC4gV2VsY29tZSB0byBteSBDb2RlUGVuOiBodHRwczovL2NvZGVwZW4uaW8vU2FyYW1hemFsICYgR2l0SHViOiBodHRwczovL2dpdGh1Yi5jb20vc2FyYW1hemFs -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

<!-- 图片div-->
<!-- <link rel="stylesheet" href="./ajax.css">
<link rel="stylesheet" href="./style_jiuchu.css">-->
<!-- 图片div-->
</head>
<body>
<!-- partial:index.partial.html -->
<sectio class="nav">
  <h1>我们的交往</h1>
  <h3 class="span loader"><span class="m">初</span><span class="m">见</span><span class="m">乍</span><span class="m">惊</span><span class="m">欢</span><span class="m">&nbsp;</span><span class="m">久</span><span class="m">处</span><span class="m">亦</span><span class="m">怦</span><span class="m">然</span><span class="m">&nbsp;
  </span><span class="m">愿</span><span class="m">可</span><span class="m">共</span><span class="m">白</span><span class="m">首</span><span class="m">&nbsp;</span><span class="m">余</span><span class="m">生</span><span class="m">"成"</span><span class="m">相</span><span class="m">伴</span>
  </h3>
  <div class="nav-container"><a class="nav-tab" href="#tab-chujian">初见</a><a class="nav-tab" href="#tab-jinghuan">惊欢</a><a class="nav-tab" href="#tab-jiuchu">久处</a><a class="nav-tab" href="#tab-pengran">怦然</a><a class="nav-tab" href="#tab-keyuan">可愿?</a><span class="nav-tab-slider"></span></div>
</sectio>
<main class="main">
  <section class="slider" id="tab-chujian">
    <h1>初见</h1>
    <!-- 图片div-->
	<div>
		<span class="m"><img src="./chujian/1.jpg"></span>
		<span class="m"><img src="./chujian/2.jpg"></span>
	</div>
	  <!--<div class="card">
		<div class="content">
		  <p class="copy">工作的样子是最可爱的</p>
		</div>
	  </div>
	  <div class="card">
		<div class="content">
		  <p class="copy">真好看</p>
		</div>
	  </div>-->
	<!-- 图片div-->
	
  </section>
  <section class="slider" id="tab-jinghuan">
    <h1>惊欢</h1>
	  <h3 class="span loader"><span class="m">初</span><span class="m">见</span><span class="m">于</span><span class="m">玄</span><span class="m">武</span><span class="m">湖</span><span class="m">畔</span><span class="m">，</span></span>
		  <span class="m">惊</span><span class="m">喜</span><span class="m">在</span><span class="m">大</span><span class="m">行</span><span class="m">宫</span><span class="m">站</span><span class="m">，</span>
		  <span class="m">再</span><span class="m">也</span><span class="m">藏</span><span class="m">不</span><span class="m">下</span><span class="m">心</span><span class="m">底</span><span class="m">的</span><span class="m">喜</span><span class="m">欢</span>
	  </h3>
    <div>
		<span class="m"><img src="./jinghuan/1.jpg"></span>
		<span class="m"><img src="./jinghuan/2.jpg"></span>
		<span class="m"><img src="./jinghuan/3.jpg"></span>
	</div>
  </section>
  <section class="slider" id="tab-jiuchu">
    <h1>久处</h1>
	<!--<h2>每天下班的发消息，</h2>
	<h2>是我繁杂生活的一抹水彩。</h2>
	<h2>复杂的调试，呈现出简易的网站；</h2>
	<h2>通宵的汇编，承载着满心的喜欢。</h2>
	<h2>趁着年轻，</h2>
	<h2>想保留一点内心的冲动；</h2>
	<h2>想成为一个很酷的青年；</h2>
	<h2>想去做一些有朝气的事情。</h2>
	<h2>给心爱的女孩子送礼物，</h2>
	<h2>又怎会觉得麻烦？</h2>
	<h2>No regret for the youth.</h2>-->
	<h3 class="span loader"><span class="m">&nbsp;&nbsp;</span><span class="m">&nbsp;</span><span class="m">每</span><span class="m">天</span><span class="m">下</span><span class="m">班</span><span class="m">的</span><span class="m">发</span><span class="m">消</span><span class="m">息</span></span><span class="m">，</span>
		<span class="m">是</span><span class="m">我</span><span class="m">繁</span><span class="m">杂</span><span class="m">生</span><span class="m">活</span><span class="m">的</span><span class="m">一</span><span class="m">抹</span><span class="m">水</span><span class="m">彩</span><span class="m">。</span>
		<span class="m">复</span><span class="m">杂</span><span class="m">的</span><span class="m">调</span><span class="m">试</span><span class="m">，</span><span class="m">呈</span><span class="m">现</span><span class="m">出</span><span class="m">简</span><span class="m">易</span><span class="m">的</span><span class="m">网</span><span class="m">站</span><span class="m">；</span>
		<span class="m">通</span><span class="m">宵</span><span class="m">的</span><span class="m">汇</span><span class="m">编</span><span class="m">，</span><span class="m">承</span><span class="m">载</span><span class="m">着</span><span class="m">满</span><span class="m">心</span><span class="m">的</span><span class="m">喜</span><span class="m">欢</span><span class="m">。</span>
	</h3>
	<div>
		<span class="m"><img src="./jiuchu/1.jpg"></span>
		<span class="m"><img src="./jiuchu/2.jpg"></span>
		<span class="m"><img src="./jiuchu/3.jpg"></span>
	</div>
  </section>
  <section class="slider" id="tab-pengran">
    <h1>怦然</h1>
		<!-- 图片div-->
		<h3 class="span loader"><span class="m">&nbsp;</span><span class="m">心</span><span class="m">动</span><span class="m">"成"</span><span class="m">昏</span><span class="m">尽</span><span class="m">归</span><span class="m">"涵"</span><span class="m">，</span>
			<span class="m">一</span><span class="m">如</span><span class="m">灿</span><span class="m">星</span><span class="m">在</span><span class="m">眉</span><span class="m">眼</span>
		</h3>
	  <!--<h3 class="span loader"><span class="m">每</span><span class="m">天</span><span class="m">下</span><span class="m">班</span><span class="m">的</span><span class="m">发</span><span class="m">消</span><span class="m">息</span></span><span class="m">，</span>
		  <span class="m">是</span><span class="m">我</span><span class="m">繁</span><span class="m">杂</span><span class="m">生</span><span class="m">活</span><span class="m">的</span><span class="m">一</span><span class="m">抹</span><span class="m">水</span><span class="m">彩</span><span class="m">。</span>
		  <span class="m">复</span><span class="m">杂</span><span class="m">的</span><span class="m">调</span><span class="m">试</span><span class="m">，</span><span class="m">呈</span><span class="m">现</span><span class="m">出</span><span class="m">简</span><span class="m">易</span><span class="m">的</span><span class="m">网</span><span class="m">站</span><span class="m">；</span>
		  <span class="m">通</span><span class="m">宵</span><span class="m">的</span><span class="m">汇</span><span class="m">编</span><span class="m">，</span><span class="m">承</span><span class="m">载</span><span class="m">着</span><span class="m">满</span><span class="m">心</span><span class="m">的</span><span class="m">喜</span><span class="m">欢</span><span class="m">。</span>
	  </h3>-->
		<div>
			<span class="m"><img src="./pengran/1.jpg"></span>
			<span class="m"><img src="./pengran/2.jpg"></span>
			<span class="m"><img src="./pengran/3.jpg"></span>
		</div>
		<!-- 图片div-->
  </section>
  <section class="slider" id="tab-keyuan">
    <!-- <h1>可愿?</h1> -->
	<!-- <h2>可愿共白首？</h2> -->
	<!-- <h2>余生常相伴！</h2> -->
	<h1 class="span loader"><span class="m">可</span><span class="m">愿</span><span class="m">共</span><span class="m">白</span><span class="m">首</span><span class="m">&nbsp;</span>
		<span class="m">余</span><span class="m">生</span><span class="m">“成”</span><span class="m">相</span><span class="m">伴</span>
	</h1>
  </section>
</main>
<canvas class="background"></canvas><!-- SGVsbG8hIE15IG5hbWUgaXMgU2FyYSBNYXphbC4gV2VsY29tZSB0byBteSBDb2RlUGVuIQ== -->
<!-- partial -->
  <!--<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script><script  src="./script.js"></script> -->
  <script src="./scripthigh.js"></script><script  src="./script.js"></script>

<!--背景音乐,网页打开正常播放,微信打开,需要点击一下屏幕-->
<audio controls="controls" id="audio" autoplay="" loop="">
    <source src="http://sijiacheng.gitee.io/love-wuyuhan/wuyuhan.mp3" type="audio/mpeg"></source>
</audio>
<script>
    var audio=document.querySelector("#audio");
    //--创建页面监听，等待微信端页面加载完毕 触发音频播放
    document.addEventListener('DOMContentLoaded', function () {
        function audioAutoPlay() {
            var audio = document.getElementById('audio');
            audio.play();
            document.addEventListener("WeixinJSBridgeReady", function () {
                audio.play();
            }, false);
        }
        audioAutoPlay();
    });
    //--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
    document.addEventListener('touchstart', function () {
        function audioAutoPlay() {
            var audio = document.getElementById('audio');
            audio.play();
        }
        audioAutoPlay();
    });
</script>
</body>
</html>
